<template>
    <div class="progress-bar" @click="progressClick" ref="progressBar">
        <div class="bar-inner">
            <div class="progress" ref="progress"></div>
            <div class="progress-btn-wrapper" ref="progressBtn"
            @touchstart.prevent="progressTouchstart"
            @touchmove.prevent="progressTouchmove"
            @touchend="progressTouchend">
                <div class="progress-btn"></div>
            </div>
        </div>
    </div>
</template>
<script>
import {prefixStyle} from 'common/js/dom'
    const btnWidth=16
    const transform=prefixStyle('transform')
    export default{
       props:{
            percent:{
                type:Number,default:0
            }
       },
       watch:{
        //percent不改变js一系列的方法不会触发 按照初始渲染(html css)
        //width和transform没有设置所以为0 但是宽度还是在的 因为时间比=长度比
       //虽然时间暂停了没有触发percent 时间一固定长度固定 所以width有transform没有
       //解决方法 切回全屏的时再触发一次percent 全屏显示后的20ms内触发percent
       //transfrom 在原点迅速切到width停留的地方
            percent(newVal){
                //precent变化导致进度条变化 move的偏移也会导致进度条变化
                this.setProgressOffset(newVal)
            }
       },
       created(){
            this.touch={}//有的属性需要在data里面声明 有的属性不需要？？
       },
       methods:{
            setProgressOffset(percent){
                // console.log(percent+'****')
                if(percent>=0 && !this.touch.initialed){//添加标志位解决冲突
                    const barWidth = this.$refs.progressBar.clientWidth - btnWidth
                    const offsetWidth = percent * barWidth
                    this._offsetX(offsetWidth)
                }
            },
            _offsetX(offsetWidth){//进度条和btn的偏移
                this.$refs.progress.style.width=`${offsetWidth}px`
                this.$refs.progressBtn.style[transform]=`translate3d(${offsetWidth}px,0,0)`
            },
            progressClick(e){
                //e.offsetX以元素内容的左上角为参照点 但是点击到btn时参照点就变化了
                //this._offsetX(e.offsetX)
                const rect=this.$refs.progressBar.getBoundingClientRect()
                const offsetX=e.pageX-rect.left
                this._offsetX(offsetX)
                this._triggerPercent()
            },
            _triggerPercent() {
                this.$emit('percentChange', this._getPercent())
            },
            _getPercent(){//抽离出来时歌词需要
                const barWidth = this.$refs.progressBar.clientWidth - btnWidth
                return this.$refs.progress.clientWidth / barWidth
            },
            progressTouchstart(e){
                this.touch.initialed=true
                this.touch.startX=e.touches[0].pageX
                this.touch.left=this.$refs.progress.clientWidth
            },
            progressTouchmove(e){
                if(!this.touch.initialed) return
                let delatX=e.touches[0].pageX-this.touch.startX
                let offsetX=this.touch.left+delatX
                let translateX=Math.min(Math.max(0,offsetX),this.$refs.progressBar.clientWidth-btnWidth)
                this._offsetX(translateX)//move的时候实时调整process的宽度
                this.$emit('percentChanging', this._getPercent())//歌詞聯動
            },
            progressTouchend(){
                this.touch.initialed=false
                //touchend结束之前改变precent就会在move结束的地方,作为下一次播放的开始
                //就不会touchend结束之后(因为precent没改变)跳回到原来的地方
                //currentTime/currentSong.duration=progress.clientWidth/barWidth
                this._triggerPercent()
            }
       }
    }
</script>
<style lang="stylus">
@import '~common/stylus/variable'
    .progress-bar
        height 30px
        .bar-inner
            position relative
            top 13px
            height 4px
            background rgba(0,0,0,0.3)
            .progress
                position absolute//不给宽度根据js%定宽 
                height 100%
                background $color-theme
            .progress-btn-wrapper
                position absolute
                left -8px
                top -13px
                width 30px
                height 30px
                .progress-btn
                    position relative
                    top 7px
                    left 7px
                    width 16px
                    height 16px
                    border-radius 50%
                    border 3px solid $color-text
                    background $color-theme
                    box-sizing border-box

</style>